<template>
	<view class="bg-fff p-30 br-10 m-b-30">
		<view class="j-between">
			<view class="title">{{form.name || '设备名称'}}</view>
			<u-tag v-show="status" :text="status" :type="className" plain plainFill></u-tag>
		</view>
		<u-divider></u-divider>
		<u-row customStyle="margin-bottom: 20px;align-items: flex-start" v-for="(item, index) in detailList" :key="index">
			<u-col :span="data.span" v-for="(data, i) in item" :key="data.name">
				<view class="m-b-20 col-label">{{data.name}}</view>
				<view class="col-data">{{form[data.key] || '--'}}</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		props: {
			form: {
				type: Object,
				default: () => {
					return {}
				}
			},
			status: {
				type: String,
				default: '待检测'
			},
			className: {
				type: String,
				default: 'primary'
			}
		},
		data() {
			return {
				detailList: [
					[{
							span: 9,
							name: '准确度',
							key: 'devicePrecision'
						},
						{
							span: 3,
							name: '型号规格',
							key: 'modelNumber'
						},
					],
					[{
							span: 9,
							name: '制造厂家',
							key: 'manufacturer'
						},
						{
							span: 3,
							name: '总件数',
							key: 'smallQuantity'
						},
					],
					[{
							span: 5,
							name: '出厂日期',
							key: 'dateOfProductionLitter'
						},
						{
							span: 4,
							name: '出厂编号',
							key: 'factoryNumber'
						},
						{
							span: 3,
							name: '自编号',
							key: 'selfNumber'
						},
					],
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	// .u-col {
	// 	view:first-child {
	// 		font-size: 24rpx;
	// 		font-weight: 400;
	// 		color: #59606A;
	// 	}

	// 	view:last-child {
	// 		font-size: 26rpx;
	// 		font-weight: 400;
	// 		color: #333333;
	// 	}
	// }

	.col-label {
		font-size: 24rpx;
		font-weight: 400;
		color: #59606A;
	}

	.col-data {
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
	}
</style>